<template>
    <n-carousel autoplay>
        <li v-for="(item) in iamge" :key="item.id">
            <img
                    class="carousel-img"
                    :src="item.img"
            />
        </li>
    </n-carousel>
</template>

<script>
  import { defineComponent } from 'vue'
  const iamge = [
    {id:1,img: 'https://img.bjsxt.com/uploadfile/2020/12/banner8.jpg'},
    {id:2,img: 'https://img.bjsxt.com/uploadfile/2020/08/%E7%99%BE%E6%88%98.jpg'},
    {id:3,img: 'https://img.bjsxt.com/uploadfile/2020/08/%E5%89%8D%E7%AB%AF.jpg'},
    {id:4,img: 'https://img.bjsxt.com/uploadfile/2020/08/java%E5%AE%9E%E6%88%98.jpg'},
  ]
  export default defineComponent({
        name: 'carousel',
        setup(){
          return{
            iamge
          }
        }
  });
</script>

<style lang="scss" scoped>
    .carousel-img {
        width: 100%;
        height: 240px;
        object-fit: contain;
    }
</style>
